<template>
    <div style="margin: 20px 100px;">
        <el-upload
      action="/shop/member/upload"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      accept=".xlsx, .xls">

      <el-button slot="trigger" size="small" type="primary">选择Excel文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" v-loading.fullscreen.lock="fullscreenLoading">上传到服务器</el-button>
    </el-upload>
    <div style="margin-top: 10px;display: flex;align-items: center;width: 100%;flex-direction: row;" v-show="fileChunk.name!==undefined">
        <div>{{ fileChunk.name }}</div>
        <i class="el-icon-delete" @click="del" style="margin-left: 50px;"></i>
    </div>
    </div>
    
  </template>
   
  <script>
    import { getToken } from '@/utils/auth';
    import axios from 'axios';

    export default {
        data(){
            return{
                action:'/shop/member/upload',
                fileChunk:{},
                fullscreenLoading:false
            }
        },
        methods: {
            del(){
                this.fileChunk=""
            },
            beforeUpload(file) {
                this.fileChunk = file;
                console.log(file)
                // 返回 false 阻止默认上传行为
                return false;
            },
        //     const token = getToken(); // 获取你的认证token
        //   axios.post(this.action, file, {
        //     headers: {
        //       'Authorization': `Bearer ${token}`
        //     }
        //   }).then(response => {
        //     console.log(response)
        //     // 处理上传成功的响应
        //   }).catch(error => {
        //     // 处理上传失败的错误
        //   })
        handleSuccess(response, file, fileList) {
            console.log('File uploaded successfully:', response);
        },
        handleError(err, file, fileList) {
            console.error('Error uploading file:', err);
        },
        submitUpload() {
            // this.$refs.upload.submit();
            const token = getToken(); // 获取你的认证token
            this.fullscreenLoading=true
            const file = this.fileChunk;
            if (file) {
                // 创建FormData
                const formData = new FormData();
                formData.append('file', file);
        
                // 使用axios或者其他HTTP库发送请求
                axios.post(this.action, formData, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                    onUploadProgress: progressEvent => {
                        if (progressEvent.lengthComputable) {
                            // 可以获取上传进度
                            const percentComplete = (progressEvent.loaded / progressEvent.total) * 100;
                            console.log(percentComplete);
                        }
                    }
                }).then(res => {
                    this.fullscreenLoading=false
                    console.log(res.data.map.result)
                    if(res.data.map.result){
                        this.$message.error(res.data.map.result)
                    }
                    this.fileChunk={}
                    
                }).catch(error => {
                    this.fullscreenLoading=false
                    this.fileChunk={}
                });
            }
        },
        }
    }
  </script>
<style lang="scss" scoped>
    .el-upload{
        width: 400px;
        height: 600px;
        margin: 0 auto;
        margin-top: 50px !important;
    }
</style>